<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./template/layui/css/layui.css">
    <script type="text/javascript" src="./template/layui/layui.js"></script>
</head>
<body>
    <ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-card layui-col-md4">
              <div class="layui-card-header">卡片面板</div>
              <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
              </div>
            </div>
            <div class="layui-card layui-col-md4">
              <div class="layui-card-header">卡片面板</div>
              <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
              </div>
            </div>
            <div class="layui-card layui-col-md4">
              <div class="layui-card-header">卡片面板</div>
              <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
              </div>
            </div>
        </div>
      <div class="layui-row">
        <div class="layui-col-md4">
           <div class="layui-carousel" id="test1">
              <div carousel-item>
                <div><img src="https://m.360buyimg.com/babel/jfs/t22327/354/1468788926/76783/57b040d3/5b28b8e2Na8dc03b6.jpg"></div>
                <div><img src="https://img1.360buyimg.com/pop/jfs/t22210/317/654070818/155681/d3c866ea/5b15dff1N8fec67b1.jpg"></div>
                <div><img src="https://img1.360buyimg.com/pop/jfs/t23263/220/274148182/108433/a86e8409/5b2b0088N40654ab7.jpg"></div>
              </div>
            </div>
        </div>
        <div class="layui-col-md8">
          <form class="layui-form" action="">
              <div class="layui-form-item">
                <label class="layui-form-label">输入框</label>
                <div class="layui-input-block">
                  <input type="text" name="title" required  lay-verify="phone" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="email" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                  <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                  </select>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="like[write]" title="写作">
                  <input type="checkbox" name="like[read]" title="阅读" checked>
                  <input type="checkbox" name="like[dai]" title="发呆">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="switch" lay-skin="switch">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                  <input type="radio" name="sex" value="男" title="男">
                  <input type="radio" name="sex" value="女" title="女" checked>
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                  <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-md4">
            <button class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
            <input type="text" class="layui-input" id="xbsdate">
        </div>
        <div class="layui-col-md8">
            <table class="layui-table">
              <colgroup>
                <col width="150">
                <col width="200">
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th>昵称</th>
                  <th>加入时间</th>
                  <th>签名</th>
                </tr> 
              </thead>
              <tbody>
                <tr>
                  <td>贤心</td>
                  <td>2016-11-29</td>
                  <td>人生就像是一场修行</td>
                </tr>
                <tr>
                  <td>许闲心</td>
                  <td>2016-11-28</td>
                  <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
              </tbody>
            </table>
        </div>
        </div>
    </div>
   
    <script>
        layui.use(['carousel','form','laydate','layer','element'], function(){
          var carousel = layui.carousel;
          var form = layui.form;
          var laydate = layui.laydate;
          var layer = layui.layer;
          var element = layui.element;


          layer.msg('玩命卖萌中', function(){
            //关闭后的操作
            });

          layer.open({
              type: 1,
              skin: 'layui-layer-rim', //加上边框
              area: ['420px', '240px'], //宽高
              content: 'html内容'
            });

          //执行一个laydate实例
          laydate.render({
            elem: '#xbsdate' //指定元素
          });

          //建造实例
          carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
          });
        });
</script>
</body>
</html>